<template>
	<view>
		<!-- 顶部面板背景 -->
		<view class="top"></view>

		<!-- 订单信息卡片 -->
		<uni-card style="position: relative; top: -320rpx; border-radius: 30rpx;">
			<view class="card-header">
				<span>订单信息</span>
				<span class="status">{{evaluate.order.state==0?'已完成':'未完成'}}</span>
			</view>
			<view class="order-info">
				<view class="info-row">
					<view class="label">订单号：</view>
					<view class="value">{{evaluate.order.number}}</view>
				</view>
				<view class="info-row">
					<view class="label">服务项目：</view>
					<view class="value">车辆保养</view>
				</view>
				<view class="info-row">
					<view class="label">服务门店：</view>
					<view class="value">{{evaluate.order.shop.shopName}}</view>
				</view>
				<view class="info-row">
					<view class="label">下单时间：</view>
					<view class="value">{{evaluate.order.createTime}}</view>
				</view>
				<view class="info-row">
					<view class="label">预约时间：</view>
					<view class="value">{{evaluate.order.subscribeTime}}</view>
				</view>
				<view class="info-row">
					<view class="label">车辆：</view>
					<view class="value">{{evaluate.order.car.carNumber}}</view>
				</view>
				<view class="info-row">
					<view class="label">备注：</view>
					<view class="value">{{evaluate.order.remark}}</view>
				</view>
			</view>
		</uni-card>

		<!-- 订单详情卡片 -->
		<uni-card style="position: relative; top: -320rpx; border-radius: 30rpx;">
			<view class="card-header">
				<span>订单详情</span>
			</view>
			<view>
				<view class="detail-row">
					<view>车辆精洗</view>
					<view>￥39.90</view>
				</view>
				<view class="detail-row">
					<view>车辆附加费用</view>
					<view>￥0.00</view>
				</view>
				<view class="detail-section">
					<view class="detail-row">
						<view>原价</view>
						<view>￥59.90</view>
					</view>
					<view class="detail-row">
						<view>店家优惠</view>
						<view class="discount">-￥20.00</view>
					</view>
				</view>
				<view class="detail-section">
					<view class="detail-row">
						<view>优惠券</view>
						<view class="discount">-￥10.00</view>
					</view>
				</view>
				<view class="detail-section">
					<view class="detail-row">
						<view>支付金额</view>
						<view class="total-amount">￥29.90</view>
					</view>
				</view>
			</view>
		</uni-card>

		<!-- 评价结果卡片 -->
		<uni-card style="position: relative; top: -320rpx; border-radius: 30rpx;">
			<view class="card-header">
				<span>评价结果</span>
			</view>
			<view>
				<view class="info-row" style="margin-bottom: 30rpx;">
					<span class="label">评价时间：</span>
					<span class="value">{{evaluate.commentTime}}</span>
				</view>
				<view style="display: flex; color: black; margin-bottom: 10rpx;">
					评价结果:
					<u-rate style="margin-right: 14rpx;" active-color="#ffc100" gutter="0"
						v-model="evaluate.star"></u-rate>
				</view>
				<view class="comment">
					{{evaluate.comments}}
				</view>
			</view>
		</uni-card>
	</view>


</template>

<script>
	export default {
		data() {
			return {
				rate: 3,
				id: '',
				evaluate: {}
			};
		},
		onLoad(option) {
			this.id = option.id
			this.getDetail()
		},
		methods: {
			getDetail() {
				let that = this
				this.$http({
					url: '/api/order/evaluate/' + this.id,
					method: 'get',
					success(res) {
						that.evaluate = res.data.data
						console.log(that.evaluate)
					}
				})
			}
		}
	};
</script>

<style scoped lang="scss">
	/* 顶部背景样式 */
	.top {
		padding-right: 20rpx;
		padding-left: 20rpx;
		height: 280rpx;
		background-color: #2f81fa;
		padding-top: 60rpx;
	}

	/* 卡片头部样式 */
	.card-header {
		margin: 30rpx 5rpx;
		padding-bottom: 14rpx;
		border-bottom: 12rpx solid #f7f7f7;
		display: flex;
		justify-content: space-between;

		span {
			font-size: 36rpx;
			color: black;
			font-weight: 500;
		}

		.status {
			color: #ff3c00;
		}
	}

	/* 订单信息样式 */
	.order-info {
		margin: 20rpx 0;

		.info-row {
			display: flex;
			justify-content: flex-start;
			margin-bottom: 12rpx;
			font-size: 32rpx;
			color: black;

			.label {
				width: 220rpx;
				/* 固定宽度 */
				font-weight: 500;
			}

			.value {
				flex: 1;
				font-weight: 300;
			}
		}
	}

	/* 订单详情样式 */
	.detail-row {
		display: flex;
		justify-content: space-between;
		color: black;
		margin-bottom: 20rpx;
	}

	.detail-section {
		margin: 30rpx 5rpx;
		padding-bottom: 14rpx;
		border-bottom: 6rpx solid #f7f7f7;
		margin-bottom: 20rpx;
	}

	.discount {
		color: #ff3c00;
	}

	.total-amount {
		font-size: 42rpx;
		font-weight: 600;
	}

	/* 评价结果样式 */
	.comment {
		font-size: 26rpx;
		color: black;
		margin-top: 10rpx;
	}
</style>